<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>移动div</title>
		<script src="js/jquery.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				var fx;
				var fy;
				var flag = false;
				var alpha = $("#alpha");
				var title = $("#m_div_title");
				var m_div = $("#m_div");
				m_div.mousemove(function(event) {
					if(flag) {
						var myEvent = event || window.event;
						;
						changeXY(m_div, myEvent);
					}
				});
				m_div.mouseup(function() {
					title.unbind("mousemove");
					flag = false;
				});
				alpha.css("width", $(window).width());
				alpha.css("height", $(window).height());
				alpha.mousemove(function(event) {
					if(flag) {
						var myEvent = event || window.event;
						;
						changeXY(m_div, myEvent);
					}
				});
				alpha.mouseup(function() {
					title.unbind("mousemove");
					flag = false;
				});
				title.mousedown(function(event) {
					var t = $(this);
					var myEvent = event || window.event;
					fx = myEvent.clientX;
					fy = myEvent.clientY;
					t.mousemove(function(event) {
						var myEvent = event || window.event;
						changeXY(m_div, myEvent);
						flag = true;
					});
				})
				function changeXY(m_div, myEvent) {
					if(fx > myEvent.clientX) {
						var change_top_x = parseInt(m_div.css("left")) - (fx - myEvent.clientX);
						//测试是否超出左边窗口
						if(change_top_x < 5) {
							change_top_x = 5;
							//flag = false;
							// title.unbind("mousemove");
						}
						m_div.css("left", change_top_x + "px");
						fx = myEvent.clientX;
					}
					if(fx < myEvent.clientX) {
						var change_top_x = parseInt(m_div.css("left")) + (myEvent.clientX - fx);
						//测试是否超出窗口右边
						if(change_top_x > ($(window).width() - parseInt(m_div.css("width")) - 5)) {
							change_top_x = ($(window).width() - parseInt(m_div.css("width")) - 5);
							//flag = false;
							//title.unbind("mousemove");
						}
						m_div.css("left", change_top_x + "px");
						fx = myEvent.clientX;
					}
					if(fy > myEvent.clientY) {
						var change_top_y = parseInt(m_div.css("top")) - (fy - myEvent.clientY)
						//测试是否超出窗口顶部
						if(change_top_y < 5) {
							change_top_y = 5;
							// flag = false;
							// title.unbind("mousemove");
						}
						m_div.css("top", change_top_y + "px");
						fy = myEvent.clientY;
					}
					if(fy < myEvent.clientY) {
						var change_top_y = parseInt(m_div.css("top")) + (myEvent.clientY - fy);
						//测试是否超出窗口底部
						if(change_top_y > ($(window).height() - parseInt(m_div.css("height")) - 5)) {
							change_top_y = ($(window).height() - parseInt(m_div.css("height")) - 5);
							//flag = false;
							//title.unbind("mousemove");
						}
						m_div.css("top", change_top_y + "px");
						fy = myEvent.clientY;
					}
				}


				title.mouseup(function() {
					title.unbind("mousemove");
					flag = false;
				})
				title.mouseout(function() {
					title.unbind("mousemove");
				})
			});
			function show() {
				var alpha = $("#alpha");
				alpha.show();
				var m_div = $("#m_div");
				m_div.slideDown("slow");
			}

			function hide() {
				var m_div = $("#m_div");
				m_div.slideUp("slow");
				var alpha = $("#alpha");
				alpha.hide();
			}
		</script>
		<style>
			body {
				background: url(../img/blo1g.sina.com_000.jpg) no-repeat center;
			}
			#m_div {
				border: 1px solid #000000;
				width: 400px;
				height: 250px;
				position: absolute;
				top: 300px;
				left: 400px;
				background-color: #FFFFFF;
				display: none;
			}
			#m_div_title {
				background: #0000FF;
				height: 25px;
				color: #FFFFFF;
				cursor: crosshair
			}
			#alpha {
				background: #000000;
				position: absolute;
				top: 0px;
				left: 0px;
				width: 500px;
				height: 500px;
				display: none;
				filter: alpha(opacity=20);
			}
		</style>
	</head>
	<body>
		<div id="alpha"></div>
		<div id="m_div">
			<div id="m_div_title">
				<span style="margin-right:300px">我想对你说</span><span style="background-color:#FFFFFF; color:#000000; cursor:pointer; "><a href="javascript:void(0)" onclick="hide()">X</a></span>
			</div>
			<div id="m_div_cont" align="center">
				<form>
					<table>
						<tr>
							<td>							<textarea cols="40" rows="8"></textarea></td>
						</tr>
						<tr>
							<td>
							<input type="submit" value=" 发送 " />
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
		<center>
			<a href="javascript:void(0)" onclick="show()">显示对话框</a>
		</center>
	</body>
</html>
